<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    .layui-table th {
        text-align: center;
    }

    .layui-table td {
        text-align: center;
    }

    .layui-input-block {
        margin-left: 75px;
    }
    .chooseVideo .layui-form-label{
        width: 62px;
        padding: 9px 5px;
    }
    .layui-layer-page .layui-layer-content{
        overflow: visible;
    }
</style>

<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">短剧分组管理</a>
            <a><cite>短剧列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">短剧id：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="video_id" placeholder="请输入短剧id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">分组名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入分组名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>

        <table id="video" lay-filter="video"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增分组</button>
            <!-- <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="push_notification">消息推送</button> -->
        </div>
    </script>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        let params = {
            elem: '#video'
            , toolbar: '#toolbarDemo'
            , url: '{:url("admin/video_template/list")}' //数据接口
            , page: true //开启分页
            , id: 'video'
            , limit:15
            , cols: [[//表头
                { type: 'checkbox' },
                { field: 'id', title: 'ID',width:145, sort: true},
                { field: 'name', title: '分组名称'}, 
                { field: 'video_name', title: '视频名称'},
                { field: 'updated_at', title: '修改时间', templet: function (d) {
                    return dayjsFormat(d.updated_at)
                }},
                { field: 'created_at', title: '添加时间', templet: function (d) {
                    return dayjsFormat(d.created_at)
                }}
                , { align: 'center', toolbar: '#tbBar', title: '操作' }
            ]]

        }
        tableList(params)

        layui.use('table', function () {
            var table = layui.table;
            table.on('toolbar(video)', function (obj) {
                var event = obj.event;
                if (event === 'add') {
                    x_admin_show('添加短剧分组', './info.html', 700, 550);
                } 
            });
            table.on('tool(video)', function (obj) {
                var event = obj.event;
                if (event === 'del') {
                    DeleteAjax('/admin/video_template/delete', { id: obj.data.id }, 'video')
                } else if (event === 'edit') {
                    x_admin_show('编辑短剧分组', `./info.html?id=${obj.data.id}`, 700, 550);
                } 
            });

        });

        let selectParams = {
            url: '/admin/type/select',
            elem: '#pMenu',
            selected: [],
            tips: '选择分类',
            name: 'video_type_id',
            field_id: 'id',
            field_Name: 'name',
        }
        selectN(selectParams)
    </script>

</body>

</html>